import { RootStackParamTypeList } from '@/navigation/StackParamType';
import { NavigationProp, useNavigation } from '@react-navigation/native';
import { use, useEffect, useLayoutEffect, useState } from 'react';
import { FlatList, Image, Text, TouchableOpacity, View } from 'react-native';

const VedioItem = ({
  title,
  url,
  icon,
}: {
  title: string;
  url: string;
  icon: string;
}) => {
  const navigation = useNavigation<NavigationProp<RootStackParamTypeList>>();

  const enter = () => {
    const params = {
      title,
      url,
      icon,
    };

    navigation.navigate('PlatformVedioScreen', params);
  };

  return (
    <TouchableOpacity
      className="w-full h-20 bg-white rounded-lg flex flex-row items-center"
      onPress={enter}
    >
      <View className="w-20 h-20 rounded-lg bg-gray-200">
        <Image source={{ uri: icon }} className="w-full h-full rounded-lg" />
      </View>
      <View className="flex-1 ml-2">
        <Text className="text-base font-bold">{title}</Text>
        <Text className="text-sm text-gray-500">{url}</Text>
      </View>
    </TouchableOpacity>
  );
};

const VedioListScreen = () => {
  const [vedioList, setVedioList] = useState<
    {
      title: string;
      url: string;
      icon: string;
    }[]
  >();

  useEffect(() => {
    // type 1 表示平台视频 2 表示直播 3 表示
    const defaultVedioList = [
      {
        title: '腾讯视频',
        url: 'https://v.qq.com/',
        icon: 'https://v.qq.com/favicon.ico',
        type: 1,
      },
      {
        title: '爱奇艺视频',
        url: 'https://www.iqiyi.com',
        icon: 'https://www.iqiyi.com/favicon.ico',
        type: 1,
      },
      {
        title: '优酷',
        url: 'https://www.youku.com',
        icon: 'https://www.youku.com/favicon.ico',
        type: 1,
      },
      {
        title: '直播',
        url: 'https://www.youku.com',
        icon: 'https://www.youku.com/favicon.ico',
        type: 2,
      },
    ];

    setVedioList(defaultVedioList);
  }, []);

  return (
    <View className=" flex-1">
      <FlatList
        data={vedioList}
        renderItem={({ item }) => (
          <VedioItem title={item.title} url={item.url} icon={item.icon} />
        )}
        keyExtractor={(item, index) => index.toString()}
        contentContainerStyle={{
          gap: 10,
        }}
      />
    </View>
  );
};

export default VedioListScreen;
